/**
 * Created by GYL on 2018/7/25
 */
/* eslint-disable */
import React, { Component } from 'react';
import MyModal from '../../../components/common/MyModal';
import { Form, Row, Col, Select, Input, message, Button, Upload, Icon, DatePicker } from 'antd';
import MyIcon from '../../../components/common/MyIcon';
import config from '../../../config';
import style from "./AddModal.less";
import moment from 'moment';
import myModalStyles from '../../../components/common/Mymodal.less';
import request from '../../../utils/request';
// import styles from './sub.less';
import MyTable from "../../../components/common/MyTable";
const FormItem = Form.Item;

class AddModal extends Component {
  state = {
    solidType: '1',
    tableData: [],
    upDis: true
  };
  componentDidMount() {
    this.setState({
      moddleArrTable: this.props.moddleArrTable
    })

  };
  // modal保存
  onModalSave = () => {
    this.props.form.validateFieldsAndScroll((err, val) => {
      if (!err) {
        this.props.onModalSave(val,this.state.moddleArrTable)
      }
    });
  };
  // 筛选条件组件change事件
  getChangeValue(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }
  onCheckbox(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }
  //下拉选择
  onSelect = (text, record, index, v) => {
    console.log(text, record, index, v)
    this.props.AddOptions.forEach(item => {
      if (item.id == v) {
        this.state.moddleArrTable[index].kpiCode = item.kpiCode
      }
    });
    this.state.moddleArrTable[index].kpiName = v
    setTimeout(() => {
      this.setState({
        moddleArrTable: this.state.moddleArrTable
      })
    }, 300)
  }

  //清空
  onQingKong = (text, record, index) => {
    if (this.props.title == '查看') {
      return
    }
    this.state.moddleArrTable[index].kpiName = ''
    this.state.moddleArrTable[index].kpiCode = ''
    this.setState({
      moddleArrTable: this.state.moddleArrTable
    })
  }

  onBlur = (lable, v) => {
    console.log(lable, v)
    //localhost:8085/sx-client/sx/kpiclassify/findNameisExist
    if (lable === 'name') {
      let params = {
        "name": v.target.value,
        "equipmentId": this.props.equipmentId
      }
      request({
        url: '/sx-client/sx/kpiclassify/findNameisExist',
        method: 'POST',
        data: params
      }).then(data => {
        console.log(data)
        if(data.ret){
          this.props.form.validateFields(['name'], { force: true });
          message.warning('输入的名称已重复,请重新输入')
          setTimeout(() => {
            this.props.form.setFieldsValue(
              { ['name']: '' },
            )
          },500)

        }
        
      })
    }
  }
  render() {
    let t = this;
    let { tableData, upDis } = t.state;

    let { getFieldDecorator } = t.props.form;

    let titleText = this.props.titleText
    let arr1 = this.props.moddleArr;

    const columns = [
      {
        title: '序号',
        dataIndex: 'sn',
        key: 'sn',
        width: 50,
        align: 'center',
      },
      {
        title: '指标名称',
        dataIndex: 'kpiName',
        key: 'kpiName',
        width: 240,
        align: 'center',
        render: (text, record, index) =>
          <Select size='small' style={{ width: 240 }} onChange={this.onSelect.bind(this, text, record, index)} value={record.kpiName} disabled={this.props.title == '查看' ? true : false}>
            {
              this.props.AddOptions.map((item) => {
                return (
                  <Option value={item.id}>{item.kpiName}</Option>
                )
              })
            }
          </Select>
      },
      {
        title: '测试编码',
        dataIndex: 'kpiCode',
        key: 'kpiCode',
        width: 120,
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'address',
        key: 'address',
        width: 100,
        align: 'center',
        render: (text, record, index) => <span onClick={this.onQingKong.bind(this, text, record, index)} style={{ cursor: 'pointer' }}>

          {this.props.title === '查看' ? '/' : '清空'}
        </span>
      },
    ];

    const formItemLayout =
      {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }


    return (
      <div>
        <MyModal
          {...t.props}
          // className={myModalStyles.jlModal}
          width={this.props.width}
          onModalSave={t.onModalSave}>
          <Form layout={'vertical'} {...formItemLayout}>

            {
              arr1.map((item, index) => {
                if (item.type === 'input') {
                  return (


                    <FormItem label={item.label}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue ? item.initialValue : '',
                          rules: item.rules || null
                        })(
                          <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                            placeholder={item.placeholder} disabled={item.disabled} onBlur={this.onBlur.bind(this, item.paramName)} />
                        )
                      }
                    </FormItem>


                  )
                }

              })
            }



          </Form>
          <MyTable
            columns={columns}
            dataSource={this.state.moddleArrTable}
            pagination={false}
          />
        </MyModal>
      </div>
    )
  }
}
export default Form.create()(AddModal);
